<div class="container_12" id="body">
	<div class="grid_12">
	<?php echo form_open_multipart('backend/category/', array('id' => 'form_category_index'));?>
	<form name="" action="" method="post">
		<div style="text-align: right;">
			<?php echo form_button(array('name' => 'btn_delete', 'id' => 'btn_delete'), 'Xóa'); ?>
			<?php echo form_button(array('name' => 'btn_update_position', 'id' => 'btn_update_position'), 'Sắp xếp'); ?>
			<?php echo anchor('backend/group/create', 'Thêm mới', 'class="button" id="btn_create"');?>
		</div>
		<table class="tablesorter" border="0" cellpadding="0" cellspacing="1">
			<thead>
				<tr>
					<th width="1"><input type="checkbox" name="chk_all" /></th>
					<th width="300">Tên</th>
					<th>Mô tả</th>
					<th width="60" align="center">Vị trí</th>
					<th width="60">&nbsp;</th>
				</tr>
			</thead>
			<tbody></tbody>
		</table>
		<div class="pagination"></div>
	</form>
	</div>
	<div class="clear"></div>
</div>
<div id="dlg_category" title="Danh mục" style="display: none">
<?php echo form_open_multipart("backend/category/create", 'method="post" id="form_dlg_category" name="form_dlg_category"');?>
	<div class="message" style="display: none">
		<p><span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
			<strong>Hey!</strong> 
			<span class="msg"></span>
		</p>
	</div>
	<div>
		<label for="name" style="width: 120px">Tên danh mục</label>
		<div class="fl">
			<input type="text" name="name" id="name" class="input medium text ui-widget-content ui-corner-all" />
		</div>
		<div class="clear"></div>
	</div>
	<div id="parent_container">
		<label for="parent_id" style="width: 120px">Danh mục cha</label>
		<div id="parentid_container" class="fl"></div>
		<div class="clear"></div>
	</div>
	<div>
		<label for="description" style="width: 120px">Mô tả</label>
		<div class="fl">
		<textarea name="description" id="description" class="input medium text ui-widget-content ui-corner-all" style="height: 70px; width: 185px"></textarea>
		</div>
		<div class="clear"></div>
	</div>
<?php echo form_close();?>
</div>
<script type="text/javascript">
var sort_dir = 'asc';
var ajax_url = null;
$(function() {
	var $name = $("#name");
	var $description = $("#description"); 
	var $allFields = $([]).add($name).add($description);
	
	$("#dlg_category:ui-dialog").dialog( "destroy");
	$("#dlg_category").dialog({
		autoOpen: false,
		width: 350,
		modal: true,
		open: function() {
		},
		close: function() {
			$('#move_action').val(0).attr('disabled', false);
			$allFields.val('');
			hide_message();
		}
	});
	
	$('#btn_create').live('click', function() {
		load_dropdown(null);
		$("#dlg_category").dialog("option", "title", "Thêm danh mục")
		.dialog("option", "buttons", [{
			text : "Hủy",
			click : function() {
				$(this).dialog("close");
			}
		},{
			text : "Thêm mới",
			click : function() { 
				$.postJSON(base_url+'backend/category/create', 
				$('form#form_dlg_category').serialize(), 
				function(data) {
					if(data.success == "1") {
						$("#dlg_category").dialog("close");
						_load(base_url+current+'/load');
					} else {
						display_message(data.message);
					}
				}); 
			}
		}
		]).dialog("open");
		
		return false;
	});

	$('.btn_edit').live('click', function() {
		var _cid = $(this).attr('rel');
		$.postJSON(base_url+'backend/category/load/'+_cid,function(data){
			$name.val(data.name);
			$description.val(data.description);
			load_dropdown(data.parent_id);
		});
		$("#dlg_category").dialog("option", "title", "Sửa danh mục")
		.dialog("option", "buttons", [{
			text : "Hủy",
			click : function() {
				$(this).dialog("close"); 
			}
		},{
			text : "Lưu",
			click : function() { 
				$.postJSON(base_url + 'backend/category/update/' + _cid, 
				$('form#form_dlg_category').serialize(),
				function(data) {
					if(data.success == 1) {
						$("#dlg_category").dialog("close");
						_load(base_url+current+'/load');
					} else {
						display_message(data.message);
					}
				});
			}
		}
		]).dialog( "open");
		
		return false;
	});

	$('#btn_delete').live('click', function() {
		if(confirm('Xóa những mục dữ liệu này?')) {
			_load(base_url+current+'/delete', $('form').serialize());
		}
		return false;
	});

	$('#btn_update_position').live('click', function() {
		_load(base_url+current+'/update_position', $('form').serialize());
		return false;
	});

	$('input[name="chk_all"]').live('click', function() {
		$(this).parents('table').find('input:checkbox').attr('checked', $(this).is(':checked'));   
	});

	_load(base_url+current+'/load');
});

function _load(url, params) {
	$.postJSON(url, params, function(data) {
		if(data != null && data.message == 'OK') {
			if(params == null) {
				ajax_url = url;
				$('input[name="chk_all"]').attr('checked', false);
				
				$('.tablesorter tbody').html(data.rows);
				$('.pagination').html(data.pagination);

				$('.tablesorter tbody tr').hover(
					function(){ $(this).children('td').addClass('row_hover'); }, 
					function(){ $(this).children('td').removeClass('row_hover'); }
				);
				
				$('.tablesorter tbody tr:odd > td').addClass('row_odd');
				$(".edit").button({icons: {primary: "ui-icon-wrench"}, text: false});
			} else {
				_load(ajax_url);
			}
		} else {
			alert("Error");
		}
	});
}

function display_message(message) {
	$('.message .msg').text(message);
	$('.message').addClass("ui-state-highlight").show();
}

function hide_message() {
	$('.message .msg').text('');
	$('.message').removeClass("ui-state-highlight").hide();
}

function load_dropdown(selected) {
	$.postJSON(base_url+'backend/category/gen_options', {
		'name' : 'parent_id'
	}, function(data) {
		$('#parentid_container').html(data);
		if(selected) {
			$('select[name="parent_id"]').val(selected);
		} else {
			$('select[name="parent_id"]').val("");
		}
	});
}
</script>
